#certificates-view
  background-color: white
  text-align: center
  font-family: 'Open Sans', sans-serif
  margin-left: auto
  margin-right: auto
  width: 11in
  height: 8.5in
  // 792 x 612 pt
  @import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light')
  @import url('https://fonts.googleapis.com/css?family=Spectral')

  @media print
    -webkit-print-color-adjust: exact
    html, body
      height: 100%
      overflow: hidden

  .style-flat
    padding-top: 0

  .menu
    position: fixed
    left: 3pt
    top: 2pt

    .btn
      margin-left: 0
      margin-bottom: 10px
      display: block

    @media print
      display: none

  .certificate
    color: black
    position: relative

    .certificate-background
      width: 100%

    h1
      font-family: 'Shadows Into Light', 'Open Sans', sans-serif

    h3, h4
      font-family: 'Open Sans', sans-serif
      text-transform: uppercase

    h3
      font-weight: bold
      font-size: 14pt
      line-height: 40pt

    h4
      font-size: 12pt
      line-height: 30pt

    .certificate-contents
      width: 100%
      height: 100%
      position: absolute
      left: 0
      top: 0
      right: 0
      z-index: 1
      letter-spacing: 1pt

      .concepts-learned
        .concepts-list 
          font-size: 7pt
          line-height: 9pt
          li 
            display: inline-block
            font-size: 7pt
            line-height: 9pt
            margin: 2px 5px 

    .certificate-text-container
      width: 7in
      height: 4.5in
      position: absolute
      left: 2in
      top: 2in
      right: 2in
      bottom: 2in
      z-index: 1
      @if $is-codecombat
        background-color: rgba(255, 255, 255, 0.8) !important

    .logo-img
      z-index: 2
      position: relative
      @if $is-codecombat
        margin-top: 1.3in
        height: 1.1in
      @else
        margin-top: 1.0in
        height: 1.3in
    .tecmilenio-logo
      position: absolute
      top: 50px
      left: 50px
      width: 395px
    .tecmilenio-hero
      position: absolute
      width: 160px
      left: 72px
      bottom: 80px
      transform: scaleX(-1)

    .tecmilenio
      @if $is-codecombat
        margin-top: 1in
      @else
        margin-top: .6in
        margin-bottom: -30pt
      .base-logo
        @if $is-codecombat
          height: .7in
        @if not $is-codecombat
          height: .5in
        display: inline-block
      @if $is-codecombat
        .tec-logo-img
          margin-left: .2in

    .certificate-of-completion
      @if $is-codecombat
        margin-top: 20pt
      @else
        margin-top: 50pt
        line-height: 10pt
      word-spacing: 10pt

    .course-name
      letter-spacing: 2pt

    .loading-indicator, .student-name
      color: rgb(77, 61, 37)
      text-align: center
      width: 5.3in
      margin-left: 0.85in
      $student-name-size: 48pt
      font-size: $student-name-size
      line-height: $student-name-size
      @if $is-codecombat
        border-bottom: 2pt solid white
      @else
        border-bottom: 2pt solid rgb(227, 195, 71)
      height: $student-name-size + 2pt

    .loading-indicator
      margin-top: 2in

    .outcome-section
      position: absolute
      text-align: center
      width: 3in

      h3
        line-height: 30pt

      &.code-results
        @if $is-codecombat
          left: 0.1in
        @else
          left: 0.0in

      &.concepts-learned
        @if $is-codecombat
          left: 4in
        @else
          left: 3.9in

      li
        text-transform: uppercase
        font-size: 9pt
        @if $is-codecombat
          line-height: 18pt
        @else
          line-height: 16pt

        a
          text-transform: none

    @if $is-codecombat
      .hero-pose
        position: absolute
        bottom: 0.75in
        z-index: 2
        width: 1.7in
        left: 0.8in

        &.captain
          transform: scaleX(-1)

        &.knight
          width: 2.5in
          left: 0.3in

        &.samurai
          width: 1.7in
          left: 0.8in

        &.raider
          width: 2in
          left: 0.6in

        &.goliath
          width: 2.8in
          left: 0in

        &.guardian
          width: 2.2in
          left: 0.55in

        &.duelist
          width: 2.1in
          left: 0.6in

        &.champion
          width: 1.7in
          left: 0.8in

        &.stalwart
          width: 2.3in
          left: 0.5in

    .hero-signature, .product-codecombat & .teacher-info
      position: absolute
      bottom: 0.1in
      left: 0.6in
      @if $is-codecombat
        width: 3in
        border-top: 2pt solid white
      @else
        width: 1.8in
        border-top: 2pt solid rgb(227, 195, 71)

      img
        @if $is-codecombat
          height: 0.75in
          position: absolute
          bottom: 0
          left: -0.2in
        @else
          height: 0.3in
          position: absolute
          bottom: 0.3in
          left: 0

      .hero-signature-label
        text-transform: uppercase
        font-size: 9pt
        line-height: 18pt
        text-align: left
        @if $is-codecombat
          white-space: nowrap

    @if $is-codecombat
      .product-codecombat & .teacher-info
        border: 0
        left: auto
        right: 0.6in
        text-transform: uppercase
        font-size: 9pt
        line-height: 18pt
        text-align: right

      .certificate-number-info
        right: 10pt
        position: absolute
        top: 30pt
        font-size: x-small

      .course-ribbon
        position: absolute
        left: 2.7in
        width: 1.6in

        img
          position: relative
          max-width: 100%
          max-height: 100%

        h3
          font-size: 16pt
          position: absolute
          bottom: 0.52in
          right: 0in
          text-align: center
          width: 100%
          color: rgb(207, 137, 40)
          font-family: 'Spectral', serif

        &.cs h3
          font-size: 24pt
          bottom: 0.42in

        &.cs2 h3, &.cs6 h3
          bottom: 0.45in

        &.cs4 h3, &.cs5 h3
          bottom: 0.48in

        &.gd
          width: auto
          height: 2in
          left: 2.85in

        &.gd h3
          font-size: 22pt
          top: 0.35in

        &.gd1 h3
          font-size: 22pt
          top: 0.3in

        &.gd3 h3
          top: 0.4in
